import React from 'react'
import { Stack } from 'expo-router'
import UIConstants from '../constants/UIConstants';
import AntDesign from '@expo/vector-icons/AntDesign';
import { Text } from 'react-native';

export default function MyTopLayout() {
    return (
        // <Stack></Stack>
        <Stack screenOptions={{
            headerStyle: {
                backgroundColor: UIConstants.COLOR_GREEN,//背景颜色
            },
            // headerTitleStyle: {
            //     fontWeight: 'bold',
            // },
            headerTitleAlign: "center",//文字对齐方式
            headerTintColor: '#fff',//文字颜色
        }}>
            <Stack.Screen name='index' options={{
                title: '首页',
                // 若使用headerTitle:()=>(<></>),   //会替换title
                headerLeft: () => (//*****注意这里小括号() 返回一个jsx元素*****
                    <>
                        <AntDesign name="arrowleft" size={24} color={UIConstants.COLOR_WHITE} />
                        <Text style={{color:"#fff"}}>返回</Text>
                    </>
                ),
                headerRight: () => ( //*****注意这里小括号() 返回一个jsx元素*****
                    <>
                        <AntDesign name="search1" size={24} color={UIConstants.COLOR_WHITE} />
                        <AntDesign name="search1" size={24} color={UIConstants.COLOR_WHITE} />
                    </>

                )
            }} />
            <Stack.Screen name='mine' options={{
                title: '我的',
                // headerShown:false,//控制显示
            }}></Stack.Screen>
        </Stack>
    )
}